<template>
  <div class="rumor-database">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>谣言库管理</h1>
      <p>管理谣言信息、验证状态和相关辟谣内容</p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stats-card">
        <div class="card-icon total-icon">
          <i class="el-icon-warning"></i>
        </div>
        <div class="card-content">
          <h3>{{ totalRumors }}</h3>
          <p>总谣言数</p>
        </div>
      </div>
      <div class="stats-card">
        <div class="card-icon verified-icon">
          <i class="el-icon-circle-check"></i>
        </div>
        <div class="card-content">
          <h3>{{ verifiedRumors }}</h3>
          <p>已验证</p>
        </div>
      </div>
      <div class="stats-card">
        <div class="card-icon pending-icon">
          <i class="el-icon-time"></i>
        </div>
        <div class="card-content">
          <h3>{{ pendingRumors }}</h3>
          <p>待审核</p>
        </div>
      </div>
      <div class="stats-card">
        <div class="card-icon debunked-icon">
          <i class="el-icon-check"></i>
        </div>
        <div class="card-content">
          <h3>{{ debunkedRumors }}</h3>
          <p>已辟谣</p>
        </div>
      </div>
    </div>

    <!-- 操作工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <el-button type="primary" @click="showAddRumorDialog">
          <i class="el-icon-plus"></i>
          添加谣言
        </el-button>
        <el-button type="success" @click="batchVerify" :disabled="selectedRumors.length === 0">
          <i class="el-icon-check"></i>
          批量验证
        </el-button>
        <el-button type="danger" @click="batchDelete" :disabled="selectedRumors.length === 0">
          <i class="el-icon-delete"></i>
          批量删除
        </el-button>
        <el-button type="warning" @click="exportRumors">
          <i class="el-icon-download"></i>
          导出数据
        </el-button>
      </div>
      <div class="toolbar-right">
        <el-input
          v-model="searchQuery"
          placeholder="搜索谣言内容或关键词"
          style="width: 300px"
          clearable
          @input="handleSearch"
        >
          <template #prefix>
            <i class="el-icon-search"></i>
          </template>
        </el-input>
        <el-select v-model="statusFilter" placeholder="状态筛选" style="width: 120px; margin-left: 10px">
          <el-option label="全部" value=""></el-option>
          <el-option label="已验证" value="verified"></el-option>
          <el-option label="待审核" value="pending"></el-option>
          <el-option label="已辟谣" value="debunked"></el-option>
        </el-select>
        <el-select v-model="categoryFilter" placeholder="分类筛选" style="width: 120px; margin-left: 10px">
          <el-option label="全部" value=""></el-option>
          <el-option label="时政" value="politics"></el-option>
          <el-option label="科技" value="technology"></el-option>
          <el-option label="健康" value="health"></el-option>
          <el-option label="社会" value="social"></el-option>
        </el-select>
      </div>
    </div>

    <!-- 谣言列表 -->
    <div class="rumor-table">
      <el-table
        :data="filteredRumors"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="content" label="谣言内容" min-width="300">
          <template #default="scope">
            <div class="rumor-content">
              <div class="content-text">{{ scope.row.content }}</div>
              <div class="content-tags">
                <el-tag size="small" v-for="tag in scope.row.tags" :key="tag">
                  {{ tag }}
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="100">
          <template #default="scope">
            <el-tag :type="getCategoryColor(scope.row.category)">
              {{ getCategoryText(scope.row.category) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="来源" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusColor(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="riskLevel" label="风险等级" width="100">
          <template #default="scope">
            <el-tag :type="getRiskLevelColor(scope.row.riskLevel)">
              {{ getRiskLevelText(scope.row.riskLevel) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="spreadCount" label="传播次数" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button type="text" size="small" @click="viewRumorDetail(scope.row)">
              详情
            </el-button>
            <el-button type="text" size="small" @click="editRumor(scope.row)">
              编辑
            </el-button>
            <el-button type="text" size="small" @click="debunkRumor(scope.row)">
              辟谣
            </el-button>
            <el-button type="text" size="small" @click="deleteRumor(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalRumors"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加/编辑谣言对话框 -->
    <el-dialog
      v-model="rumorDialogVisible"
      :title="isEditMode ? '编辑谣言' : '添加谣言'"
      width="800px"
      :before-close="handleCloseDialog"
    >
      <el-form
        :model="rumorForm"
        :rules="rumorFormRules"
        ref="rumorFormRef"
        label-width="100px"
      >
        <el-form-item label="谣言内容" prop="content">
          <el-input
            v-model="rumorForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入谣言内容"
          />
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="rumorForm.category" placeholder="请选择分类">
            <el-option label="时政" value="politics" />
            <el-option label="科技" value="technology" />
            <el-option label="健康" value="health" />
            <el-option label="社会" value="social" />
          </el-select>
        </el-form-item>
        <el-form-item label="来源" prop="source">
          <el-input v-model="rumorForm.source" placeholder="请输入来源" />
        </el-form-item>
        <el-form-item label="风险等级" prop="riskLevel">
          <el-select v-model="rumorForm.riskLevel" placeholder="请选择风险等级">
            <el-option label="高危" value="high" />
            <el-option label="中危" value="medium" />
            <el-option label="低危" value="low" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键词" prop="tags">
          <el-input v-model="rumorForm.tagsInput" placeholder="请输入关键词，用逗号分隔" />
        </el-form-item>
        <el-form-item label="辟谣内容" prop="debunkContent">
          <el-input
            v-model="rumorForm.debunkContent"
            type="textarea"
            :rows="4"
            placeholder="请输入辟谣内容"
          />
        </el-form-item>
        <el-form-item label="证据链接" prop="evidenceLinks">
          <el-input
            v-model="rumorForm.evidenceLinks"
            type="textarea"
            :rows="2"
            placeholder="请输入证据链接，用换行分隔"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="rumorForm.status" placeholder="请选择状态">
            <el-option label="已验证" value="verified" />
            <el-option label="待审核" value="pending" />
            <el-option label="已辟谣" value="debunked" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rumorDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRumor">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 谣言详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="谣言详情"
      width="800px"
    >
      <div class="rumor-detail" v-if="selectedRumor">
        <div class="detail-section">
          <h3>基本信息</h3>
          <div class="detail-grid">
            <div class="detail-item">
              <label>ID:</label>
              <span>{{ selectedRumor.id }}</span>
            </div>
            <div class="detail-item">
              <label>分类:</label>
              <el-tag :type="getCategoryColor(selectedRumor.category)">
                {{ getCategoryText(selectedRumor.category) }}
              </el-tag>
            </div>
            <div class="detail-item">
              <label>来源:</label>
              <span>{{ selectedRumor.source }}</span>
            </div>
            <div class="detail-item">
              <label>状态:</label>
              <el-tag :type="getStatusColor(selectedRumor.status)">
                {{ getStatusText(selectedRumor.status) }}
              </el-tag>
            </div>
            <div class="detail-item">
              <label>风险等级:</label>
              <el-tag :type="getRiskLevelColor(selectedRumor.riskLevel)">
                {{ getRiskLevelText(selectedRumor.riskLevel) }}
              </el-tag>
            </div>
            <div class="detail-item">
              <label>传播次数:</label>
              <span>{{ selectedRumor.spreadCount }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h3>谣言内容</h3>
          <div class="content-box">
            {{ selectedRumor.content }}
          </div>
        </div>

        <div class="detail-section" v-if="selectedRumor.tags && selectedRumor.tags.length > 0">
          <h3>关键词</h3>
          <div class="tags-container">
            <el-tag v-for="tag in selectedRumor.tags" :key="tag" style="margin-right: 8px;">
              {{ tag }}
            </el-tag>
          </div>
        </div>

        <div class="detail-section" v-if="selectedRumor.debunkContent">
          <h3>辟谣内容</h3>
          <div class="content-box">
            {{ selectedRumor.debunkContent }}
          </div>
        </div>

        <div class="detail-section" v-if="selectedRumor.evidenceLinks">
          <h3>证据链接</h3>
          <div class="links-container">
            <div v-for="link in selectedRumor.evidenceLinks" :key="link" class="link-item">
              <a :href="link" target="_blank">{{ link }}</a>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'RumorDatabase',
  setup() {
    const loading = ref(false)
    const rumorDialogVisible = ref(false)
    const detailDialogVisible = ref(false)
    const isEditMode = ref(false)
    const rumorFormRef = ref(null)
    const selectedRumors = ref([])
    const selectedRumor = ref(null)
    const searchQuery = ref('')
    const statusFilter = ref('')
    const categoryFilter = ref('')
    const currentPage = ref(1)
    const pageSize = ref(20)

    // 统计数据
    const totalRumors = ref(3456)
    const verifiedRumors = ref(2890)
    const pendingRumors = ref(566)
    const debunkedRumors = ref(2324)

    // 谣言数据
    const rumors = ref([
      {
        id: 1,
        content: '某地发生地震，政府隐瞒真相',
        category: 'politics',
        source: '微博',
        status: 'verified',
        riskLevel: 'high',
        spreadCount: 15420,
        tags: ['地震', '政府', '隐瞒'],
        debunkContent: '经核实，该地区未发生地震，相关部门已公开回应。',
        evidenceLinks: ['https://example.com/evidence1', 'https://example.com/evidence2'],
        createTime: '2025-01-15 10:30:00'
      },
      {
        id: 2,
        content: '5G基站辐射会导致癌症',
        category: 'technology',
        source: '朋友圈',
        status: 'debunked',
        riskLevel: 'medium',
        spreadCount: 8532,
        tags: ['5G', '辐射', '癌症'],
        debunkContent: '科学研究表明，5G基站辐射在安全范围内，不会导致癌症。',
        evidenceLinks: ['https://example.com/evidence3'],
        createTime: '2025-01-14 15:20:00'
      },
      {
        id: 3,
        content: '某品牌疫苗含有有害成分',
        category: 'health',
        source: '论坛',
        status: 'pending',
        riskLevel: 'high',
        spreadCount: 3241,
        tags: ['疫苗', '有害', '成分'],
        debunkContent: '',
        evidenceLinks: [],
        createTime: '2025-01-13 09:45:00'
      }
    ])

    // 谣言表单
    const rumorForm = reactive({
      id: null,
      content: '',
      category: '',
      source: '',
      riskLevel: '',
      tagsInput: '',
      debunkContent: '',
      evidenceLinks: '',
      status: 'pending'
    })

    // 表单验证规则
    const rumorFormRules = {
      content: [
        { required: true, message: '请输入谣言内容', trigger: 'blur' },
        { min: 10, message: '谣言内容至少10个字符', trigger: 'blur' }
      ],
      category: [
        { required: true, message: '请选择分类', trigger: 'change' }
      ],
      source: [
        { required: true, message: '请输入来源', trigger: 'blur' }
      ],
      riskLevel: [
        { required: true, message: '请选择风险等级', trigger: 'change' }
      ],
      status: [
        { required: true, message: '请选择状态', trigger: 'change' }
      ]
    }

    // 过滤后的谣言列表
    const filteredRumors = computed(() => {
      let filtered = rumors.value

      // 搜索过滤
      if (searchQuery.value) {
        filtered = filtered.filter(rumor => 
          rumor.content.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
          rumor.tags.some(tag => tag.toLowerCase().includes(searchQuery.value.toLowerCase()))
        )
      }

      // 状态过滤
      if (statusFilter.value) {
        filtered = filtered.filter(rumor => rumor.status === statusFilter.value)
      }

      // 分类过滤
      if (categoryFilter.value) {
        filtered = filtered.filter(rumor => rumor.category === categoryFilter.value)
      }

      return filtered
    })

    // 获取分类颜色
    const getCategoryColor = (category) => {
      switch (category) {
        case 'politics': return 'danger'
        case 'technology': return 'primary'
        case 'health': return 'success'
        case 'social': return 'warning'
        default: return 'info'
      }
    }

    // 获取分类文本
    const getCategoryText = (category) => {
      switch (category) {
        case 'politics': return '时政'
        case 'technology': return '科技'
        case 'health': return '健康'
        case 'social': return '社会'
        default: return '未知'
      }
    }

    // 获取状态颜色
    const getStatusColor = (status) => {
      switch (status) {
        case 'verified': return 'success'
        case 'pending': return 'warning'
        case 'debunked': return 'primary'
        default: return 'info'
      }
    }

    // 获取状态文本
    const getStatusText = (status) => {
      switch (status) {
        case 'verified': return '已验证'
        case 'pending': return '待审核'
        case 'debunked': return '已辟谣'
        default: return '未知'
      }
    }

    // 获取风险等级颜色
    const getRiskLevelColor = (riskLevel) => {
      switch (riskLevel) {
        case 'high': return 'danger'
        case 'medium': return 'warning'
        case 'low': return 'success'
        default: return 'info'
      }
    }

    // 获取风险等级文本
    const getRiskLevelText = (riskLevel) => {
      switch (riskLevel) {
        case 'high': return '高危'
        case 'medium': return '中危'
        case 'low': return '低危'
        default: return '未知'
      }
    }

    // 显示添加谣言对话框
    const showAddRumorDialog = () => {
      isEditMode.value = false
      resetRumorForm()
      rumorDialogVisible.value = true
    }

    // 编辑谣言
    const editRumor = (rumor) => {
      isEditMode.value = true
      Object.assign(rumorForm, {
        ...rumor,
        tagsInput: rumor.tags ? rumor.tags.join(', ') : '',
        evidenceLinks: rumor.evidenceLinks ? rumor.evidenceLinks.join('\n') : ''
      })
      rumorDialogVisible.value = true
    }

    // 查看谣言详情
    const viewRumorDetail = (rumor) => {
      selectedRumor.value = rumor
      detailDialogVisible.value = true
    }

    // 辟谣
    const debunkRumor = (rumor) => {
      ElMessageBox.confirm(`确定要对谣言 "${rumor.content.substring(0, 20)}..." 进行辟谣吗？`)
        .then(() => {
          rumor.status = 'debunked'
          ElMessage.success('辟谣成功')
        })
        .catch(() => {})
    }

    // 删除谣言
    const deleteRumor = (rumor) => {
      ElMessageBox.confirm(`确定要删除谣言 "${rumor.content.substring(0, 20)}..." 吗？`)
        .then(() => {
          const index = rumors.value.findIndex(r => r.id === rumor.id)
          if (index !== -1) {
            rumors.value.splice(index, 1)
            ElMessage.success('谣言删除成功')
          }
        })
        .catch(() => {})
    }

    // 重置表单
    const resetRumorForm = () => {
      Object.assign(rumorForm, {
        id: null,
        content: '',
        category: '',
        source: '',
        riskLevel: '',
        tagsInput: '',
        debunkContent: '',
        evidenceLinks: '',
        status: 'pending'
      })
      if (rumorFormRef.value) {
        rumorFormRef.value.resetFields()
      }
    }

    // 关闭对话框
    const handleCloseDialog = (done) => {
      ElMessageBox.confirm('确定要关闭吗？')
        .then(() => {
          resetRumorForm()
          done()
        })
        .catch(() => {})
    }

    // 保存谣言
    const saveRumor = () => {
      rumorFormRef.value.validate((valid) => {
        if (valid) {
          const rumorData = {
            ...rumorForm,
            tags: rumorForm.tagsInput ? rumorForm.tagsInput.split(',').map(tag => tag.trim()) : [],
            evidenceLinks: rumorForm.evidenceLinks ? rumorForm.evidenceLinks.split('\n').map(link => link.trim()) : [],
            spreadCount: 0
          }

          if (isEditMode.value) {
            // 编辑谣言
            const index = rumors.value.findIndex(r => r.id === rumorForm.id)
            if (index !== -1) {
              rumors.value[index] = { ...rumorData }
              ElMessage.success('谣言更新成功')
            }
          } else {
            // 添加谣言
            const newRumor = {
              ...rumorData,
              id: Date.now(),
              createTime: new Date().toLocaleString()
            }
            rumors.value.push(newRumor)
            ElMessage.success('谣言添加成功')
          }
          rumorDialogVisible.value = false
          resetRumorForm()
        }
      })
    }

    // 批量验证
    const batchVerify = () => {
      if (selectedRumors.value.length === 0) {
        ElMessage.warning('请选择要验证的谣言')
        return
      }

      ElMessageBox.confirm(`确定要验证选中的 ${selectedRumors.value.length} 个谣言吗？`)
        .then(() => {
          selectedRumors.value.forEach(rumor => {
            rumor.status = 'verified'
          })
          selectedRumors.value = []
          ElMessage.success('批量验证成功')
        })
        .catch(() => {})
    }

    // 批量删除
    const batchDelete = () => {
      if (selectedRumors.value.length === 0) {
        ElMessage.warning('请选择要删除的谣言')
        return
      }

      ElMessageBox.confirm(`确定要删除选中的 ${selectedRumors.value.length} 个谣言吗？`)
        .then(() => {
          const selectedIds = selectedRumors.value.map(r => r.id)
          rumors.value = rumors.value.filter(r => !selectedIds.includes(r.id))
          selectedRumors.value = []
          ElMessage.success('批量删除成功')
        })
        .catch(() => {})
    }

    // 导出谣言
    const exportRumors = () => {
      ElMessage.success('谣言数据导出成功')
    }

    // 处理选择变化
    const handleSelectionChange = (selection) => {
      selectedRumors.value = selection
    }

    // 处理搜索
    const handleSearch = () => {
      currentPage.value = 1
    }

    // 处理页面大小变化
    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
    }

    // 处理当前页变化
    const handleCurrentChange = (page) => {
      currentPage.value = page
    }

    onMounted(() => {
      // 初始化数据
    })

    return {
      loading,
      rumorDialogVisible,
      detailDialogVisible,
      isEditMode,
      rumorFormRef,
      selectedRumors,
      selectedRumor,
      searchQuery,
      statusFilter,
      categoryFilter,
      currentPage,
      pageSize,
      totalRumors,
      verifiedRumors,
      pendingRumors,
      debunkedRumors,
      rumors,
      filteredRumors,
      rumorForm,
      rumorFormRules,
      getCategoryColor,
      getCategoryText,
      getStatusColor,
      getStatusText,
      getRiskLevelColor,
      getRiskLevelText,
      showAddRumorDialog,
      editRumor,
      viewRumorDetail,
      debunkRumor,
      deleteRumor,
      resetRumorForm,
      handleCloseDialog,
      saveRumor,
      batchVerify,
      batchDelete,
      exportRumors,
      handleSelectionChange,
      handleSearch,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.rumor-database {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #666;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stats-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
  color: #fff;
}

.total-icon {
  background: linear-gradient(45deg, #e6a23c, #ffd666);
}

.verified-icon {
  background: linear-gradient(45deg, #67c23a, #95de64);
}

.pending-icon {
  background: linear-gradient(45deg, #f56c6c, #ff9c6e);
}

.debunked-icon {
  background: linear-gradient(45deg, #409eff, #66d9ef);
}

.card-content h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 5px;
}

.card-content p {
  font-size: 14px;
  color: #666;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toolbar-left {
  display: flex;
  gap: 10px;
}

.toolbar-right {
  display: flex;
  align-items: center;
}

.rumor-table {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.rumor-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.content-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.rumor-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e6e6e6;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-item label {
  font-weight: 500;
  color: #666;
  min-width: 80px;
}

.content-box {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 15px;
  line-height: 1.6;
  color: #333;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.links-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.link-item a {
  color: #409eff;
  text-decoration: none;
}

.link-item a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .toolbar {
    flex-direction: column;
    gap: 15px;
  }
  
  .toolbar-left {
    width: 100%;
    justify-content: center;
  }
  
  .toolbar-right {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
}
</style> 